<template>
	<view>
		<scroll-view v-show="!showSong" scroll-y="true" @scrolltolower="scrollBottom"
			style="width: 100%;height: 100vh;">
			<view class="ipt-box">
				<input @input="inputs" class="ipt" :value="keywords" type="text" placeholder="请输入关键词搜索歌手或歌曲...">
				<view @click="goSearchDetail" class="search-btn">
					搜索
				</view>
			</view>
			<view>
				<u-tabs @click="tabClick" :list="list" lineColor="#ee0000" itemStyle="height: 34px;width:27%">
				</u-tabs>
			</view>
			<!-- 综合 -->
			<search-all v-if="tabType==1" :all_artists="all_artists" :all_songs="all_songs" :nextOrPrevId="nextOrPrevId"
				:audio="audio" @showSongEmit="showSongEmit" @lyricEmit="lyricEmit" @isChangeEmit="isChangeEmit"
				@currentTimeEmit="currentTimeEmit" @audioEmit="audioEmit" @currentIndexEmit="currentIndexEmit" />

			<search-songs v-if="tabType==3" :songs="songs" :nextOrPrevId="nextOrPrevId" :audio="audio"
				:reachBottom="reachBottom" :keywords="keywords" @showSongEmit="showSongEmit" @lyricEmit="lyricEmit"
				@isChangeEmit="isChangeEmit" @currentTimeEmit="currentTimeEmit" @audioEmit="audioEmit"
				@currentIndexEmit="currentIndexEmit" />
		</scroll-view>

		<view v-show="showSong&&lyric">
			<song-detail @songBack="songBack" @pauseMusic="pauseMusic" @nextOrPrev="nextOrPrev" :lyric="lyric"
				:currentTime="currentTime" :isChange="isChange" />
		</view>
	</view>
</template>

<script>
	import {
		getSearchDetailApi,
		getArtistFansApi,
		getArtistApi,
		getSongUrlApi,
		getSongDetailApi,
	} from "@/api/api.js"
	export default {
		data() {
			return {
				showSong: false, //展示歌词
				lyric: '', //歌词
				currentTime: 0, //歌词播放时间
				isChange: false, //是否切歌
				currentIndex: 0, //当前音乐的index
				audio: null,
				nextOrPrevId: {
					id: 0,
					index: 0
				}, //下一首id
				list: [{
					id: 1,
					name: "综合"
				}, {
					id: 2,
					name: "歌手"
				}, {
					id: 3,
					name: "单曲"
				}],
				keywords: '',
				all_artists: [],
				all_songs: [],
				artists: [],
				songs: [],
				tabType: 1, //tab默认为1 综合
				reachBottom: false //是否触底
			}
		},
		onLoad(options) {
			this.keywords = options.keywords;
			this.init();
		},
		methods: {
			async init() {
				await this.getData(1);
				await this.getData(100);
				console.log(this.songs);
			},
			async getData(type) {
				let data = {
					keywords: this.keywords,
					type
				};
				let res = await getSearchDetailApi(data);
				if (type == 1) this.songs = await res.result.songs;
				else this.artists = await res.result.artists;
				this.getSongUrl();
				await this.getFans();
				await this.getMyAr();
			},
			async getFans() {
				for (let i = 0; i < this.artists.length; i++) {
					let data = {
						id: this.artists[i].id
					};
					let res = await getArtistFansApi(data);
					let result = await getArtistApi(data);
					this.$set(this.artists[i], 'fansCnt', res.data.fansCnt);
					this.$set(this.artists[i], 'musicSize', result.data.artist.musicSize);
				}
				let all_artists = JSON.parse(JSON.stringify(this.artists));
				this.all_artists = all_artists.splice(0, 3);
			},
			async getSongUrl() {
				let ids = [];
				for (let j = 0; j < this.songs.length; j++) {
					ids.push(this.songs[j].id);
				}

				ids = ids.join(',');
				let data = {
					ids
				};
				let res = await getSongUrlApi(data);
				let urls = res.data;
				let result = await getSongDetailApi(data);
				let mvs = result.songs;

				for (let i = 0; i < this.songs.length; i++) {
					urls.map(it => {
						if (it.id == this.songs[i].id) {
							this.$set(this.songs[i], 'song_url', it.url);
						}
					});
				}
			},
			getMyAr() {
				for (let j = 0; j < this.songs.length; j++) {
					let artists = "";
					this.songs[j].ar.map(it => {
						artists += `${it.name}/`;
					});
					this.$set(this.songs[j], 'my_ar', artists.slice(0, artists.length - 1));
				}
				let all_songs = JSON.parse(JSON.stringify(this.songs));
				this.all_songs = all_songs.splice(0, 10);
			},
			tabClick(e) {
				this.tabType = e.id;
				this.showSong = false; //展示歌词
				this.lyric = ''; //歌词
				this.currentTime = 0; //歌词播放时间
				this.isChange = !this.isChange; //切换tab即切歌
				this.currentIndex = 0; //当前音乐的index
				this.audio = null;
				this.nextOrPrevId = {
					id: 0,
					index: 0
				};
			},
			formatCount(count) {
				let cnt = Math.round(count / 10000);
				if (cnt >= 1) return cnt + "万";
				else return count;
			},
			/**
			 * 接收search_all----------------------------start
			 */
			showSongEmit(e) {
				this.showSong = e;
			},
			lyricEmit(e) {
				this.lyric = e;
			},
			isChangeEmit(e) {
				this.isChange = e;
			},
			currentTimeEmit(e) {
				this.currentTime = e;
			},
			audioEmit(e) {
				this.audio = e;
			},
			currentIndexEmit(e) {
				this.currentIndex = e;
			},
			/**
			 * 接收search_all----------------------------end
			 */

			/**
			 * 接收song_detail----------------------------start
			 */
			//返回
			songBack(e) {
				this.showSong = e;
			},
			//暂停
			pauseMusic(e) {
				if (e) this.audio[0].pause();
				else this.audio[0].play();
			},
			goLyric() {
				this.showSong = !this.showSong;
			},
			//audio timeupdate
			timeupdate(e) {
				this.currentTime = e.detail.currentTime;
			},
			//播放下一首或上一首
			nextOrPrev(e) {
				if (e == 2) {
					if (this.currentIndex < this.songs.length - 1) {
						this.isChange = !this.isChange;
						this.currentIndex++;
						this.$set(this.nextOrPrevId, 'id', this.songs[this.currentIndex].id);
						this.$set(this.nextOrPrevId, 'index', this.currentIndex);
					} else {
						return;
					}
				} else if (e == 1) {
					if (this.currentIndex > 0) {
						this.isChange = !this.isChange;
						this.currentIndex--;
						this.$set(this.nextOrPrevId, 'id', this.songs[this.currentIndex].id);
						this.$set(this.nextOrPrevId, 'index', this.currentIndex);
					} else {
						return;
					}
				}
			},
			/**
			 * 接收song_detail----------------------------end
			 */
			//触底
			scrollBottom(e) {
				if (e.detail.direction == 'bottom') {
					if (this.tabType == 3) {
						this.reachBottom = true;
						setTimeout(() => {
							this.reachBottom = false;
						}, 500);
					} else {
						return;
					}
				}
			},
			goSearchDetail() {
				if (!this.search_val) return;
				this.keywords = this.search_val;
				this.init();
				this.search_val = '';
			},
			inputs(e) {
				this.search_val = e.detail.value;
				if (!this.search_val) uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.ipt-box {
		display: flex;
		width: 95%;
		margin: 20rpx auto;

		.ipt {
			width: 85%;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 40rpx;
			border-radius: 40rpx;
			background-color: rgba(217, 217, 217, .3);
			font-size: 28rpx;
		}

		.search-btn {
			width: 15%;
			height: 60rpx;
			margin: auto 0;
			margin-left: 20rpx;
			line-height: 60rpx;
			background-color: rgba(255, 123, 0, 0.7);
			color: rgba(255, 255, 255, 0.9);
			font-size: 28rpx;
			border-radius: 20rpx;
			text-align: center;
		}
	}
</style>